<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>内置指令  v-cloak</title>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>

    <style>
        [v-cloak]{
            display: none;
        }
    </style>

</head>

<body>
    <!-- 
        学过的内置指令
            一：v-bind  :   单向绑定解析表达式   可简写成：  ：xxx
            二：v-model :   双向数据绑定
            三：v-for   :   遍历数组/对象/字符串
            四：v-on    :   绑定事件监听，可简写成  @
            五：v-if    :   条件渲染(动态控制节点是否存在)
            六：v-else    :   条件渲染(动态控制节点是否存在)
            七：v-show    :   条件渲染(动态控制节点是否展示)

        v-cloak 指令(没有值)：
            一:本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
            二：使用css配合v-cloak可以解决网速慢时页面展示出{{xx}}的问题。
                    一：v-html会替换掉节点中所有的内容，{{xx}}则不会。
                    二：v-html可以识别html结构。
                    
     -->

    <!-- 准备好一个容器 -->
    <div id="root">
       <h2 v-cloak>{{name}}</h2>
    </div>

    <script type="text/javascript" src="http://localhost:8080/recource/5s/vue.js"></script>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false // 阻止 vue在启动时生成生产提示    

    

    const vm = new Vue({
        el: '#root',
        data: {
            name: '徐亚远',
            msg: '你好，xyy',
            strHtml: '<h3>你好啊！ v-html </h3>'
        },
    })
</script>

</html>